<template>
    <div class="judge-question-item">
        <h3 class="type">【判断题】</h3>
        <p class="content">{{ question.problemDescription }}</p>
        <div class="answer-box">
            <el-radio-group v-model="radio" @input="handleInput" :disabled="disabled">
                <el-radio v-for="(item) in answerList" :key="item.label" :label="item.label">{{ item.text }}</el-radio>
            </el-radio-group>
            <div class="answer-tip" v-if="radio > -1">
                <p>
                    <span>您的答案：{{ userAnswer }}</span>
                    <el-button class="btn" size="mini" @click="submit">提交</el-button>
                    <el-button v-show="disabled" class="btn" size="mini" @click="next">下一题</el-button>
                </p>
                <p v-show="disabled">正确答案：{{ rightAnswer }}</p>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'JudgeQuestionItem',
    props: {
        question: {
            type: Object,
            default: () => { },
            required: true
        }
    },
    data(){
        return {
            radio: -1,
            answerList: [
                {
                    text: 'A、正确',
                    label: 0
                },
                {
                    text: 'B、错误',
                    label: 1
                }   
            ],
            disabled: false
        }
    },
    methods: {
        handleInput(data) {
            console.log(data);
        },
        submit() {
            this.disabled = true;
        },
        next() {
            this.$emit('next');
        }
    },
    computed: {
        rightAnswer() {
            let o = {
                'A': 0,
                'B': 1,
            }
            let answer = this.answerList[o[this.question.answer]];
            return this.answerList.length > 0 ? answer.text : ''
        },
        userAnswer() {
            let answer = this.answerList[this.radio];
            return this.radio > -1 ? answer.text : ''
        }
    }
}
</script>
<style lang="scss" scoped>
.judge-question-item {
    overflow: hidden;
    border: 1px solid #ddd;
    padding-top: 5px;
    border-radius: 4px;
    .type {
        text-align: left;
    }

    .content {
        width: 100%;
        white-space: pre-wrap;
        word-wrap: break-word;
        word-break: break-all;
        text-align: left;
        padding: 10px;
        box-sizing: border-box;
    }

    .answer-box {
        width: 100%;
        padding: 10px;
        text-align: left;
        box-sizing: border-box;
        .answer-tip {
            font-size: 13px;
            > p {
                margin-top: 5px;
            }
            .btn {
                margin-left: 20px;
            }
        }
    }
}
</style>